<template>
  <el-row :gutter="24">
    <!-- 进行判断显隐 -->
    <!-- 为函数：让判断更加高效 -->
    <!-- 为字符串使用formConfig，同等于optionConfig...操作 -->
    <template v-for="item in form">
      <el-col
        v-if="
          item.if
            ? typeof item.if === 'boolean'
              ? item.if
              : typeof item.if === 'function'
              ? item.if(formParam)
              : typeof item.if === 'string'
              ? formConfig[item.if]
              : true
            : true
        "
        :key="item.key"
        :span="item.colSpan"
        :class="item.class"
      >
        <el-form-item
          :prop="item.key"
          :label="isLabel ? item.label : ''"
          :rules="
            item.rules
              ? findConfig(item.rules, formConfig)
              : [
                  {
                    required: findConfig(item.required, formConfig),
                    message:
                      item.m ||
                      item.message ||
                      `${rulesMessage[item.type]}${item.label}`,
                  },
                ]
          "
        >
          <!-- 自定义插槽 -->
          <slot
            v-if="item.slotName"
            v-bind="item || {}"
            :name="item.slotName"
          />
          <!-- 框架 -->
          <Frames
            v-else
            v-bind="$props"
            :data="item"
            @changeValue="(data) => $emit('changeValue', data)"
          />
        </el-form-item>
      </el-col>
    </template>
  </el-row>
</template>

<script>
import Frames from "./utils/index.vue";
import { propsConfig, findConfig, rulesMessage } from "./utils/index.js";

export default {
  components: {
    Frames,
  },
  emits: ["changeValue", "query", "reset"],
  props: {
    // 是否需要label
    isLabel: { type: Boolean, default: true },
    form: { type: Array, default: () => [] },
    ...propsConfig,
  },
  computed: {
    // 动态计算查询和重置按钮的 span
    gapSpan() {
      const length = this.form.length;
      if (length % 4 === 0) {
        return 24;
      } else if (length % 4 === 1) {
        return 18;
      } else if (length % 4 === 2) {
        return 12;
      } else if (length % 4 === 3) {
        return 6;
      }
    },
  },
  data() {
    return {
      rulesMessage,
      findConfig,
    };
  },
};
</script>

<style scoped></style>
